{include file="public/header" /}
<style>
    #carouselList .file-items{
        height: 237px;
    }
</style>
<body>
<div class="layui-card">
    <div class="layui-card-body">
        <!--<input type="hidden" value="{$all_products}" id="allProducts">-->
        <form id="productFormData" class="layui-form layui-form-pane" autocomplete="off">
            <div class="layui-tab layui-tab-card">
                <ul class="layui-tab-title">
                    <li class="layui-this">基本内容</li>
                    <li>SEO内容</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div class="layui-form-item">
                            <label class="layui-form-label layui-required">分类</label>
                            <div class="layui-input-block">
                                <select name="category" lay-search id="productCategory">
                                    <option value="">请选择</option>
                                    {volist name="category" id="vo"}
                                    <option value="{$vo.id}">{$vo.name}</option>
                                    {/volist}
                                </select>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label layui-required">产品名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" id="name" class="layui-input" placeholder="请输入产品名称">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-upload">
                                <label class="layui-form-label">封面图</label>
                                <div class="layui-upload">
                                    <div class="layui-input-block">
                                        <div class="upload-frame" id="uploadCover">
                                            <i class="layui-icon layui-icon-addition"></i>
                                        </div>
                                        <div class="preview-box">
                                            <div class="uploader-list" id="coverPreview"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" name="cover" id="cover">
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-upload">
                                <label class="layui-form-label">轮播图</label>
                                <div class="layui-upload">
                                    <div class="layui-input-block">
                                        <div class="preview-box">
                                            <div class="uploader-list carousel-list" id="carouselList">
                                                <div class="upload-frame" id="uploadCarousel">
                                                    <i class="layui-icon layui-icon-addition"></i>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" name="carousel" id="carousel">
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">简述</label>
                            <div class="layui-input-block">
                                <textarea name="intro" placeholder="请输入简述" class="layui-textarea"></textarea>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">产品详情</label>
                            <div class="layui-input-block">
                                <script id="productDescribe" name="describe" type="text/plain"></script>
                            </div>
                        </div>

                        <!--<div class="layui-form-item">
                            <label class="layui-form-label">相关产品</label>
                            <div class="layui-input-block">
                                <div id="relatedProducts"></div>
                            </div>
                            <input type="hidden" name="related_products" id="relatedProductsValues">
                        </div>-->

                        <div class="layui-form-item">
                            <label class="layui-form-label">排序</label>
                            <div class="layui-input-block">
                                <input type="text" name="sort" id="sort" value="255" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="status" id="status" checked lay-text="显示|隐藏" lay-skin="switch">
                                <input type="checkbox" name="is_recommended" id="is_recommended" lay-text="推荐|推荐" lay-skin="switch">
                                <!--<input type="checkbox" name="is_hot" id="hot" lay-text="热销|热销" lay-skin="switch">-->
                            </div>
                        </div>
                    </div>
                    <div class="layui-tab-item">
                        <div class="layui-form-item">
                            <label class="layui-form-label">SEO标题</label>
                            <div class="layui-input-block">
                                <input type="text" name="seo_title" id="productSeoTitle"  class="layui-input" placeholder="请输入SEO标题，长度尽量控制在60个字符内">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">SEO关键词</label>
                            <div class="layui-input-block">
                                <input type="text" name="seo_keywords" id="productSeoKeywords"  class="layui-input" placeholder="每个关键词用英文逗号隔开">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">SEO描述</label>
                            <div class="layui-input-block">
                                <textarea name="seo_describe" id="productSeoDescribe" placeholder="请输入" class="layui-textarea"></textarea>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">URL名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="seo_link" id="productSeoLink" class="layui-input" placeholder="自定义详情页URL名称，只允许输入英文字母、数字、- 和 _">
                            </div>
                        </div>
                    </div>

                    <div class="btn-block">
                        <button type="button" onclick="productSendFormData()" class="layui-btn layui-btn-normal">提交</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
</body>

<!--UEdit-->
<!--这两个文件要注意引用顺序-->
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="__STATIC__/ueditor/ueditor.config.js"></script>
<!-- 配置文件 -->
<script type="text/javascript" src="__STATIC__/ueditor/ueditor.all.js"></script>

<!--UEdit-->
<script type="text/javascript">
    var productDescribe = UE.getEditor('productDescribe');
</script>

<script type="text/javascript">
    // var allProducts = JSON.parse($("#allProducts").val())
    //存放轮播图存储路劲的数组
    var carouselImg = [];

    //存放关联产品id 的数组
    // var relatedProductsValue = [];

    layui.use(['form','upload','transfer','element'],function () {
        var $ = layui.jquery,
            form = layui.form,
            upload = layui.upload,
            transfer = layui.transfer,
            element = layui.element;

        // 相关产品
        /*transfer.render({
            width:'45%',
            elem:"#relatedProducts",
            showSearch:true,//开启搜索
            data:allProducts,
            title:['所有产品','相关产品'],
            id:'related',
            onchange:function (data, index) {
                relatedProductsValue = handleTransferData(index, data, relatedProductsValue)
            }
        })*/

        // 封面
        uploadTemplate('#uploadCover','#coverPreview','#cover','cover','productCoverLoad')

        // 轮播
        upload.render({
            elem: "#uploadCarousel",
            url: "{:url('product/upload')}",
            multiple: true,
            accept: 'file',
            size: uploadFileSize,//1M 允许上传文件大小，单位KB
            acceptMime: uploadImgExt,//只显示图片文件
            before: function (obj) {
                productCarouselLoad = layer.load(1, {shade: [0.5, '#FFF'], time: 0})//弹出遮罩层
            },
            allDone: function (obj) {
                //全部文件上传完毕
                layer.close(productCarouselLoad)//关闭遮罩层
                sucMsg("文件上传完成，上传成功文件数：" + obj.successful + ",上传失败文件数：" + obj.aborted)
            },
            done: function (res, index) {
                //上传完毕

                $("#uploadCarousel").before(
                    '<div class="file-items">' +
                    '<div class="handle" data-flag="carousel" data-path="' + res.url + '"><i class="layui-icon layui-icon-delete"></i></div>' +
                    '<img class="carousel-preview" src="' + res.url + '">' +
                    '<input type="text" name="carousel_keywords[]" value="' + res.file_name + '" class="img-seo-keywords-input">' +
                    '</div>'
                )
                carouselImg.push(res.url);
            }
        })

        function uploadTemplate(btn,preview,value,flag,load){
            upload.render({
                elem: btn,
                url: "{:url('product/upload')}",
                multiple: false,
                accept: 'file',
                size: uploadFileSize,
                acceptMime: uploadImgExt,
                before: function (obj) {
                    $(btn).addClass('upload-btn-hide')
                    $(preview).empty()
                    load = layer.load(1, {shade: [0.5, '#FFF'], time: 0})//弹出遮罩层
                },
                done: function (res) {
                    layer.close(load)//关闭遮罩层
                    sucMsg(res.msg)
                    if (res.code == 'suc') {
                        $(preview).append(
                            '<div class="file-items">' +
                            '<div class="handle" data-flag="' + flag + '" data-path="' + res.url + '"><i class="layui-icon layui-icon-delete"></i></div>' +
                            '<img class="cover-preview" src="' + res.url + '">' +
                            '</div>'
                        );

                        $(value).val(res.url)
                    } else {
                        $(btn).removeClass('upload-btn-hide')
                    }
                }
            })
        }
    })

    // 多图拖拽排序 begin
    var sortBox = document.getElementById('carouselList')

    Sortable.create(sortBox, {
        draggable: '.carousel-list .file-items',//允许拖拽的项目类名，避免上传按钮也被排序
        animation: 100,
        forceFallback: false,
        //拖拽结束
        onEnd: function (evt) {
            let domain = window.location.protocol + "//" + window.location.host
            carouselImg = []
            $('#carouselList .file-items .carousel-preview').each(function (index, elm) {
                let imgPath = elm.src.substring(domain.length)
                carouselImg.push(imgPath)
            })
        }
    })
    // 多图拖拽排序 end

    //删除图片
    $(document).on("click", ".file-items .handle", function (event) {
        let flag = $(this).attr('data-flag')
        let imgSrc = $(this).attr('data-path')
        //当前域名
        let domain = window.location.protocol + "//" + window.location.host
        //截取文件存储路径，截取域名后的路径
        imgSrc = imgSrc.substring(domain.length)

        if (flag == 'cover') {
            $('#uploadCover').removeClass('upload-btn-hide')
            $("#cover").val('')
        } else if (flag == 'carousel') {
            //从已上传文件数组中移除
            carouselImg.splice($.inArray(imgSrc, carouselImg), 1)
        }

        $(this).parent().remove();
    })

    function productSendFormData() {
        // $('#relatedProductsValues').val(JSON.stringify(relatedProductsValue))
        $("#carousel").val(carouselImg)

        let name = $("#name").val();
        let category = $("#productCategory").val();
        if (emptyCheck(name)){
            hintMsg('请输入产品名称','name')
            return false;
        } else if (emptyCheck(category)) {
            hintMsg('请选择分类','productCategory')
            return false;
        }

        //弹出遮罩层，防止多次点击
        var productAddLoad = layer.load(1,{shade:[0.5,'#FFF'],time:0})
        let data = $("#productFormData").serialize()
        ajaxRequest("{:url('product/add')}",data,function (res) {
            if (res.code == 'suc') {
                sucMsg(res.msg,function () {
                    //刷新父级页面
                    parent.layui.table.reload('productList')
                    //关闭遮罩层
                    layer.close(productAddLoad)
                    //关闭当前弹出层
                    xadmin.close()
                })
            } else {
                errMsg(res.msg,function () {
                    //关闭遮罩层
                    layer.close(productAddLoad)
                })
            }
        })
    }
</script>